<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN">
<title>暂无标题</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="" />
<!--[if IE]>
   <script src="js/html5.js"></script>
<![endif]-->

<script type="text/javascript" src="js/vue.min.js"></script>


<link href="css/common.css" rel="stylesheet" type="text/css" />


</head>

<body>
	
	<section class="box" id="box">
		<div class="subtab">
			<div class="row">
				<span>姓名：</span>
				<input type="text" class="text" v-model="addPer.name" />
			</div>
			<div class="row">
				<span>年龄：</span>
				<input type="text" class="text" v-model="addPer.age" />
			</div>
			<div class="row">
				<span>性别：</span>
				<select v-model="addPer.sex">
					<option value="请选择">请选择</option>
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<div class="row">
				<button v-on:click="add">添加</button>
			</div>
		</div>
		<div class="showtab">
			<table>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
					<th>删除</th>
				</tr>
				<tr v-for="per in pers">
					<td>{{per.name}}</td>
					<td>{{per.age}}</td>
					<td>{{per.sex}}</td>
					<td><span v-on:click="del(this)">删除</span></td>
				</tr>
			</table>
		</div>
	</section>

	<script type="text/javascript">
		var vm = new Vue({
			el: '#box',
			data: {
				addPer: {
					name: '',
					age: '',
					sex: '请选择'
				},
				pers: [{
					name: '小红',
					age: 10,
					sex: '女'
				},{
					name: '小ming',
					age: 20,
					sex: '男'
				},{
					name: '小淘',
					age: 78,
					sex: '女'
				}]
			},
			methods:{
				add: function(){
					this.pers.push(this.addPer);

					//添加完后，重置
					this.addPer = {
						name: '',
						age: 0,
						sex: '请选择'
					}
				},
				del: function(index){
					this.pers.splice(index,1);
				}
			}
		})
	</script>

</body>
</html>
